<template>
  <el-card shadow="never"
           body-style="padding: 0;">
    <div class="ele-cell demo-monitor-tool">
      <div class="ele-cell-content">
        <el-tabs v-model="saleSearch.type"
                 class="demo-monitor-tabs"
                 @tab-click="onSaleTypeChange">
          <el-tab-pane label="技师数量"
                       name="agencyCount" />
          <el-tab-pane label="订单数量"
                       name="reserveOrder" />
          <el-tab-pane label="用户数量"
                       name="stationOrder" />
          <el-tab-pane label="总充值余额"
                       name="packOrder" />
          <el-tab-pane label="总消费金额"
                       name="totalConsumption" />
        </el-tabs>
      </div>
      <div :class="['ele-inline-block', { 'hidden-xs-only': styleResponsive }]">
        <el-radio-group v-model="saleSearch.dateType"
                        size="small"
                        @input="todayFn">
          <el-radio-button :label="7">近一周</el-radio-button>
          <el-radio-button :label="30">近一月</el-radio-button>
        </el-radio-group>
      </div>
      <!--<div
        :class="['ele-inline-block', { 'hidden-sm-and-down': styleResponsive }]"
        style="width: 260px; margin-left: 10px"
      >
        <el-date-picker
          unlink-panels
          type="daterange"
          class="ele-fluid"
          end-placeholder="结束日期"
          start-placeholder="开始日期"
          v-model="saleSearch.datetime"
          range-separator="至"
          size="small"
          value-format="yyyy-MM-dd"
        />
      </div>
      <div style="margin-left: 10px">
          <el-button
            type="primary"
            @click="search"
            icon="el-icon-search"
            class="ele-btn-icon"
            size="small"
          >
            查询
          </el-button>
          <el-button  size="small" @click="reset">重置</el-button>
      </div>-->
    </div>
    <el-divider />
    <el-row>
      <el-col v-bind="styleResponsive ? { lg: 24, md: 16 } : { span: 24 }"
              style="margin-top: 30px">
        <div class="demo-monitor-title">
          <!--<span v-if="saleSearch.type === 'agencyCount'">代理趋势</span>
          <span v-else-if="saleSearch.type === 'reserveOrder'">商家趋势</span>
          <span v-else-if="saleSearch.type === 'stationOrder'">套餐趋势</span>
          <span v-else-if="saleSearch.type === 'packOrder'">设备趋势</span>-->
        </div>

        <v-chart ref="saleChart"
                 style="height: 190px"
                 :option="saleChartOption" />

        <!-- <el-empty :image-size="65"
                  v-if="!hasData.length"
                  description="暂无数据"></el-empty> -->
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { getStatisticalChart } from '@/api/dashboard/workplace';
import { use } from 'echarts/core';
import { CanvasRenderer } from 'echarts/renderers';
import { LineChart, BarChart, PieChart } from 'echarts/charts';
import {
  GridComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components';
import moment from 'moment';
import VChart from 'vue-echarts';
import { echartsMixin } from '@/utils/echarts-mixin';
use([
  CanvasRenderer,
  LineChart,
  BarChart,
  PieChart,
  GridComponent,
  TooltipComponent,
  LegendComponent
]);

use([CanvasRenderer, BarChart, GridComponent, TooltipComponent]);

export default {
  components: { VChart },
  mixins: [echartsMixin(['saleChart'])],
  data () {
    return {
      // 销售量搜索参数
      saleSearch: {
        type: 'agencyCount',
        dateType: 7,
        datetime: ''
      },
      form: {
        siteId: this.$store.state.site.info.id,
        createTimeStart: null,
        createTimeEnd: null
      },
      hasData: [],
      // 代理趋势数据
      saleroomData1: [],
      // 回收订单趋势数据
      saleroomData2: [],
      // 回收站订单趋势数据
      saleroomData3: [],
      // 打包站订单趋势数据
      saleroomData4: [],
      // 访问量趋势数据
      saleDate: [],
      // 门店排名数据
      saleroomRankData: [],
      saleRankData1: [],
      saleRankData2: [],
      saleRankData3: [],
      saleRankData4: [],
      saleroomData5: [],
      // 销售额柱状图配置
      saleChartOption: {},
      currentMoment: null
    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  created () {
    // this.getSaleroomData();
    this.todayFn(this.saleSearch.dateType);
  },

  methods: {
    // 获取当天
    todayFn (val) {
      console.log(val);
      if (val) {
        this.currentMoment = moment();
        const currentDate = this.currentMoment.format('YYYY-MM-DD');
        console.log(currentDate);
        // 减去一天的时间
        this.currentMoment.startOf('day');
        const previousDate = this.currentMoment.subtract(val, 'days');

        // 格式化为指定的字符串格式（YYYY-MM-DD HH:mm:ss）
        const formattedDate = previousDate.format('YYYY-MM-DD');
        console.log(formattedDate);
        this.form.createTimeStart = formattedDate;
        this.form.createTimeEnd = currentDate;

        this.getSaleroomData();
      } else {
        // this.currentMoment = moment();
        // this.currentMoment.startOf('day');
        // const currentDate = this.currentMoment.format('YYYY-MM-DD');
        // console.log(currentDate);
        // this.form.createDate = currentDate,
        //   this.form.createTimeStart = null
        // this.form.createTimeEnd = null
        // this.getSaleroomData();
      }
    },
    /* 搜索 */
    search () { },
    /*  重置 */
    reset () {
      this.saleSearch.datetime = [];
      this.search();
    },
    onSearchTypeChange () {
      this.saleSearch.datetime = [];
    },
    /* 获取销售量数据 */
    getSaleroomData () {
      let datyType = this.saleSearch.dateType;
      // let datetime = this.saleSearch.datetime;
      // 输入日期选择范围进入（暂无）
      /*if(datetime != ''){
       datyType = 5;
      }*/

      // const [d1, d2] = datetime ?? [];
      console.log('datyType========', this.form);
      getStatisticalChart(this.form)
        .then((data) => {
          console.log('data======', data);
          // oem名称是代理的数据查询 merchant名称商家的数据查询 equipment名称设置的数据查询 merchantType名称套餐类型的数据查询
          // return
          var disbursementsTotalList = data.topUpTotalList;
          var discountedPriceTotalList = data.disbursementsTotalList;

          console.log(discountedPriceTotalList);
          var orderList = data.orderList;

          var technicianList = data.technicianList;

          var userList = data.userList;

          this.saleDate = data.date;
          this.saleroomData1 = technicianList;
          this.saleroomData2 = orderList;
          this.saleroomData3 = userList;
          this.saleroomData4 = disbursementsTotalList;
          this.saleroomData5 = discountedPriceTotalList;
          this.onSaleTypeChange();
          console.log(
            'this.saleroomData1',
            this.saleroomData1,
            '222',
            this.saleroomData2,
            '333',
            this.saleroomData3,
            '444',
            this.saleroomData4
          );
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
      return;
    },

    /* 销售量tab选择改变事件 暂不使用 */
    onSaleTypeChange () {
      let name = '';
      let time = ''; // 折线图 线名称
      let data = []; // 折线图 count数据集合
      if (this.saleSearch.type === 'agencyCount') {
        data = this.saleroomData1.map((item) => {
          return item.technicianCount;
        }); //代理数量
        console.log(data);
        this.hasData = data;
        time = this.saleroomData1.map((item) => {
          return item.createDate;
        });
        console.log(data, time)
        console.log(this.hasData)
        name = '技师数量';
      } else if (this.saleSearch.type === 'reserveOrder') {
        data = this.saleroomData2.map((item) => {
          return item.technicianCount;
        }); //商家数量
        this.hasData = data;
        time = this.saleroomData2.map((item) => {
          return item.createDate;
        });
        name = '订单数量';
        console.log(data);
      } else if (this.saleSearch.type === 'stationOrder') {
        data = this.saleroomData3.map((item) => {
          return item.userCount;
        }); //总套餐数
        this.hasData = data;
        time = this.saleroomData3.map((item) => {
          return item.createDate;
        });

        name = '用户数量';
        console.log(data);
      } else if (this.saleSearch.type === 'packOrder') {
        data = this.saleroomData4.map((item) => {
          return item.discountedPrice;
        }); //总设备数
        console.log(data + '======================')
        this.hasData = data;
        time = this.saleroomData4.map((item) => {
          return item.createDate;
        });
        name = '总充值余额';
        console.log(data);
      } else if (this.saleSearch.type === 'totalConsumption') {
        data = this.saleroomData5.map((item) => {
          return item.disbursements;
        }); //总设备数
        this.hasData = data;
        time = this.saleroomData5.map((item) => {
          return item.createDate;
        });
        name = '总消费金额';
        console.log(data);
      }
      // if(this.saleSearch.type === 'agencyCount'){
      this.saleChartOption = {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['用户充值', '技师提现'],
          right: 20
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: time
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: name,
            type: 'line',
            smooth: true,
            symbol: 'none',
            areaStyle: {
              opacity: 0.5
            },
            data: data
          }
        ]
      };

      /*}else{
    this.saleChartOption = {
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['订单数量', '订单金额'],
        right: 20
      },
      xAxis: [
        {
          type: 'category',
          boundaryGap: false,
          data: this.saleDate
        }
      ],
      yAxis: [
        {
          type: 'value'
        }
      ],
      series: [
        {
          name: '订单数量',
          type: 'line',
          smooth: true,
          symbol: 'none',
          areaStyle: {
            opacity: 0.5
          },
          data: data.count
        },
        {
          name: '订单金额',
          type: 'line',
          smooth: true,
          symbol: 'none',
          areaStyle: {
            opacity: 0.5
          },
          data: data.money
        }
      ]
    };
  }*/
    }
  }
};
</script>

<style lang="scss" scoped>
/* 销售额、访问量工具栏 */
.demo-monitor-tool {
  padding: 0 20px;

  .demo-monitor-tabs {
    height: 51px;
  }

  :deep(.el-tabs__item) {
    height: 51px;
    line-height: 51px;
    font-size: 15px;
  }

  :deep(.el-tabs__nav-wrap:after) {
    display: none;
  }
}

/* 小标题 */
.demo-monitor-title {
  padding: 0 20px;
  margin: 15px 0 5px 0;
}

/* 排名 item */
.demo-monitor-rank-item {
  padding: 0 20px;
  line-height: 20px;
  margin-top: 18px;
}
</style>
